<template>
	<view class="clockin-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="打卡签到"></uni-navbar></view>

		<view class="sign-title">
			<u-cell-item class="title-item" @click="navTo('/pagesB/sign/rule')">
				<view class="title" slot="title">
					<view class="title-name">{{ name }}</view>
					<view class="title-dept">{{ dept }}</view>
				</view>
				<image class="portrait" slot="icon" :src="$imagePreview(userInfo.imagePath)" mode="aspectFill"></image>
				<view class="node" slot="right-icon">考勤规则</view>
			</u-cell-item>
		</view>

		<view class="uploader-add" @click="navTo('/pagesB/sign/sign_statistic')"><view>统计</view></view>

		<view class="container">
			<view style="text-align: center;padding: 20rpx 0;">
				当前位置:
				<text>{{ address }}</text>
			</view>
			<u-time-line class="time-line" v-if="iscansign">
				<u-time-line-item nodeTop="40">
					<template v-slot:node>
						<view class="time-line-node" :style="{ background: !isAm1 ? '#999' : '#3396FB' }"></view>
					</template>
					<template v-slot:content>
						<uni-time-sign
							:title="'上班'"
							:isShow="isAm1"
							:isInner="is"
							:Timer="Timer[0].time"
							:sign="amSigngo"
							:num="'1'"
							:address="address"
							@clickNav="clickNav"
							@clickSign="clickSign"
							@relocation="relocation"
						></uni-time-sign>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="40" v-if="signNum == '2'">
					<template v-slot:node>
						<view class="time-line-node" :style="{ background: !isAm2 ? '#999' : '#3396FB' }"></view>
					</template>
					<template v-slot:content>
						<uni-time-sign
							:title="'下班'"
							:isShow="isAm2"
							:isInner="is"
							:Timer="Timer[1].time"
							:sign="amSignleave"
							:num="'2'"
							:address="address"
							@clickNav="clickNav"
							@clickSign="clickSign"
							@relocation="relocation"
						></uni-time-sign>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="40" v-if="signNum == '2'">
					<template v-slot:node>
						<view class="time-line-node" :style="{ background: !isPm1 ? '#999' : '#3396FB' }"></view>
					</template>
					<template v-slot:content>
						<uni-time-sign
							:title="'上班'"
							:isShow="isPm1"
							:isInner="is"
							:Timer="Timer[2].time"
							:sign="pmSigngo"
							:num="'3'"
							:address="address"
							@clickNav="clickNav"
							@clickSign="clickSign"
							@relocation="relocation"
						></uni-time-sign>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="40">
					<template v-slot:node>
						<view class="time-line-node" :style="{ background: !isPm2 ? '#999' : '#3396FB' }"></view>
					</template>
					<template v-slot:content>
						<uni-time-sign
							:title="'下班'"
							:isShow="isPm2"
							:isInner="is"
							:Timer="Timer[3].time"
							:sign="pmSignleave"
							:num="'4'"
							:address="address"
							@clickNav="clickNav"
							@clickSign="clickSign"
							@relocation="relocation"
						></uni-time-sign>
					</template>
				</u-time-line-item>
			</u-time-line>
			<view v-else class="wxdk">
				<view class="nowt">{{ date }}</view>
				<view class="nosign">今日休息，无需打卡</view>
			</view>
		</view>
		<u-popup class="popup" v-model="show" mode="center" width="524rpx" @close="popupClose()">
			<view class="ttl01">打卡成功</view>
			<view class="img01"><image src="/static/img/success.png" mode="aspectFit"></image></view>
			<view class="txt01">{{ clockTime }}</view>
			<view class="txt02">坚持不懈，成功终将会来临！</view>
			<view class="btn01" @click="show = false">我知道了</view>
		</u-popup>

		<u-action-sheet :tips="tips" :list="navList" :border-radius="12" @click="navClick" v-model="navShow"></u-action-sheet>

		<view v-if="false && latitude && longitude && circles && covers && signInfo && pmyc && pmtq && amyc && amtq && r && isSign && num && onShow"></view>
	</view>
</template>

<script>
import uniTimeSign from '@/components/uni-time-sign.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniTimeSign
	},
	data() {
		return {
			dkcontent: '',
			show: false,
			navShow: false,
			onShow: false,
			name: '',
			dept: '',
			type: '',
			iscansign: true,
			r: 1000,
			navList: [
				{
					text: '补卡申请',
					color: '#3396FB'
				},
				{
					text: '出差申请',
					color: '#3396FB'
				},
				{
					text: '请假申请',
					color: '#3396FB'
				}
			],
			tips: {
				text: '请选择你要提交的申请单',
				color: '#666',
				fontSize: 28
			},
			Timer: [
				{
					time: '00:00'
				},
				{
					time: '00:00'
				},
				{
					time: '00:00'
				},
				{
					time: '00:00'
				}
			],
			amtq: '',
			amyc: '',
			pmtq: '',
			pmyc: '',

			isAm1: false,
			isAm2: false,
			isPm1: false,
			isPm2: false,
			signNum: '2',
			tooEarly: false,
			amSigngo: {
				time: '',
				address: '',
				mode: '',
				img: ''
			},
			amSignleave: {
				time: '',
				address: '',
				mode: '',
				img: ''
			},
			pmSigngo: {
				time: '',
				address: '',
				mode: '',
				img: ''
			},
			pmSignleave: {
				time: '',
				address: '',
				mode: '',
				img: ''
			},
			num: '0',
			is: false,
			isSign: [false, false, false, false],
			date: '',
			time: '',
			latitude: '',
			longitude: '',
			address: '',
			signInfo: {
				mode: '',
				latitude: '',
				longitude: '',
				address: '',
				time: '',
				remarks: ''
			},
			clockTime: '',
			covers: [
				{
					id: 0,
					callout: {
						content: '',
						color: 'red',
						display: 'ALWAYS'
					},
					latitude: 0,
					longitude: 0,
					iconPath: '/static/img/location.png'
				}
			],
			circles: [
				{
					latitude: 0,
					longitude: 0,
					radius: 0,
					strokeWidth: 1,
					fillColor: '#7fff00'
				}
			]
		};
	},
	onLoad() {
		this.loadLogin();
		this.getTime();
		this.getsignrule();
	},
	onShow() {
		this.getLocation();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.userId = this.userInfo.sysUser.id;
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.name = this.userInfo.sysUser.userName;
				this.dept = this.userInfo.deptName;
			} else {
				this.$logout();
			}
		},
		relocation() {
			uni.navigateTo({
				url: '/pagesB/sign/sign_map'
			});
		},
		getTime() {
			let date = this.$writeCurrentDate();
			this.date = date.year + '-' + date.month + '-' + date.date;
		},
		getLocation() {
			try {
				if (this.onShow) this.addSign();
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						let data = this.$gcj02_to_bd09(res.longitude, res.latitude);
						this.longitude = data.lng;
						this.latitude = data.lat;
						// #ifdef MP
						wx.serviceMarket
							.invokeService({
								service: 'wxc1c68623b7bdea7b',
								api: 'rgeoc',
								data: {
									location: res.latitude + ',' + res.longitude
								}
							})
							.then(res => {
								if (!res.data) {
									this.$msg('地址解析失败');
									return false;
								}
								let result = res.data.result;
								if (result.formatted_addresses) {
									this.address = result.formatted_addresses.recommend;
								} else {
									this.address = result.address;
								}
							});
						// #endif
						if (!this.onShow) this.addSign();
					}
				});
			} catch (e) {
				this.$msg('请检查位置信息');
			}
		},
		addSign() {
			this.covers[1] = {
				id: 1,
				latitude: this.latitude,
				longitude: this.longitude,
				iconPath: '/static/img/location.png'
			};
			let s = this.$pointInsideCircle(this.longitude, this.latitude, this.circles[0].longitude, this.circles[0].latitude, this.r);
			this.is = s;

			let date = this.$writeCurrentDate();
			this.signInfo.time = date.year + '-' + date.month + '-' + date.date + ' ' + date.hour + ':' + date.minu + ':' + date.sec;

			this.signInfo.latitude = this.latitude;
			this.signInfo.longitude = this.longitude;

			if (!this.onShow) {
				return false;
			}
			if (!this.is) {
				uni.showModal({
					title: '提示',
					content: '是否要外勤打卡？',
					success: res => {
						if (res.confirm) {
							this.addSignData(this.signInfo.time);
						}
					}
				});
			} else {
				this.addSignData(this.signInfo.time);
			}
		},
		confirm() {
			this.getLocation();
			this.getTime();
			this.getMySign();
		},
		popupClose() {
			this.getTime();
			this.getMySign();
		},
		clickNav(timer) {
			this.time = timer;
			this.navShow = true;
		},
		navClick(index) {
			this.onShow = false;
			switch (index) {
				case 0:
					uni.navigateTo({
						url: '/pagesB/oa/add_no5?tabs=0&time=' + this.date + ' ' + this.time
					});
					break;
				case 1:
					uni.navigateTo({
						url: '/pagesB/oa/add_no3?tabs=0&time=' + this.date + ' ' + this.time
					});
					break;
				default:
					uni.navigateTo({
						url: '/pagesB/oa/add_no1?tabs=0&time=' + this.date + ' ' + this.time
					});
					break;
			}
		},
		clickSign(num) {
			this.onShow = true;

			let isTrue = this.is;
			if (isTrue == null) {
				this.$msg('请检查位置信息');
				return;
			}

			this.num = num;
			this.getLocation();
		},
		openLocation() {
			uni.chooseLocation({
				success: res => {
					this.address = res.address;
					this.signInfo.address = res.address;
				}
			});
		},
		navTo(url) {
			this.onShow = false;
			uni.navigateTo({
				url: url
			});
		},
		getsignrule() {
			this.tooEarly = false;
			this.signInfo = {
				mode: '',
				latitude: '',
				longitude: '',
				address: '',
				time: '',
				remarks: ''
			};
			this.$request('/oaAttnd/options/query', {
				clientCode: this.clientCode
			}).then(res => {
				if (!res.data) {
					return false;
				}
				let options = res.data.options;
				let shift = res.data.shift;
				this.amtq = [shift.amSpunchS, shift.amSpunchE];
				this.amyc = [shift.amEpunchS, shift.amEpunchE];
				this.pmtq = [shift.pmSpunchS, shift.pmSpunchE];
				this.pmyc = [shift.pmEpunchS, shift.pmEpunchE];
				if (options.lngLat) {
					this.covers[0].longitude = this.circles[0].longitude = parseFloat(options.lngLat.split(',')[0]);
					this.covers[0].latitude = this.circles[0].latitude = parseFloat(options.lngLat.split(',')[1]);
				}
				this.covers[0].callout.content = options.attndLocation;
				this.r = this.circles.radius = options.effectiveRange;
				let wk = new Date().getDay();
				let weekArr = [options.isSun, options.isMon, options.isTue, options.isWed, options.isThu, options.isFri, options.isSat];
				if (weekArr[wk] == '0') {
					this.iscansign = false;
				}
				this.signNum = shift.type;
				if (shift.type == 1) {
					this.Timer = [
						{
							time: shift.amStartPunch
						},
						{
							time: ''
						},
						{
							time: ''
						},
						{
							time: shift.amEndPunch
						}
					];
				} else {
					this.Timer = [
						{
							time: shift.amStartPunch
						},
						{
							time: shift.amEndPunch
						},
						{
							time: shift.pmStartPunch
						},
						{
							time: shift.pmEndPunch
						}
					];
				}
				this.getTime();
				this.getMySign();
			});
		},
		compareDate(date1, date2) {
			let oDate1 = new Date(date1.replace(/\-/g, '/'));
			let oDate2 = new Date(date2.replace(/\-/g, '/'));
			if (oDate1.getTime() > oDate2.getTime()) {
				return '1';
			} else {
				return '2';
			}
		},
		isDuringDate(beginDateStr, endDateStr) {
			let curDate = new Date(),
				beginDate = new Date(beginDateStr.replace(/\-/g, '/')),
				endDate = new Date(endDateStr.replace(/\-/g, '/'));
			if (curDate >= beginDate && curDate <= endDate) {
				return true;
			}
			return false;
		},
		addSignData(time) {
			let data = {
				userId: this.userId,
				clientCode: this.clientCode,
				record: {
					userId: this.userId,
					clientCode: this.clientCode,
					clockPlace: this.address,
					clockLal: this.longitude + ', ' + this.latitude,
					classShift: this.num
				}
			};

			if (this.num == '0') {
				return false;
			}

			if (this.isSign[parseInt(this.num) - 1]) {
				this.$msg('已经打过卡了！');
				return false;
			}

			let url = '/oaAttnd/record/clockIn';
			if (!this.is) {
				url = '/oaAttnd/record/fieldClock';
			}

			this.$request(url, data, {
				load: true
			}).then(res => {
				this.show = true;
				if (res.data && res.data.clockTime) {
					this.clockTime = res.data.clockTime;
				}
			});
		},
		getMySign() {
			this.$request('/oaAttnd/record/list', {
				userId: this.userId,
				clientCode: this.clientCode,
				dateRange: this.date + ' - ' + this.date
			}).then(res => {
				let date = this.$writeCurrentDate();
				let nowTime = date.year + '-' + date.month + '-' + date.date + ' ' + date.hour + ':' + date.minu + ':' + date.sec;
				let amdk11 = this.date + ' ' + this.amtq[0];
				let amdk12 = this.date + ' ' + this.amtq[1];
				let amdk21 = this.date + ' ' + this.amyc[0];
				let amdk22 = this.date + ' ' + this.amyc[1];

				let pmdk11 = this.date + ' ' + this.pmtq[0];
				let pmdk12 = this.date + ' ' + this.pmtq[1];
				let pmdk21 = this.date + ' ' + this.pmyc[0];
				let pmdk22 = this.date + ' ' + this.pmyc[1];

				if (this.compareDate(nowTime, amdk11) == '2') {
					this.tooEarly = true;
					this.isAm1 = true;
				}

				if (this.signNum == 1) {
					if (this.isDuringDate(amdk11, pmdk21)) {
						this.isAm1 = true;
					}
					if (this.isDuringDate(pmdk21, pmdk22)) {
						this.isAm1 = false;
						this.isPm2 = true;
						this.amSigngo.mode = '3';
					}
					if (this.compareDate(pmdk22, nowTime) == '2') {
						this.isAm1 = false;
						this.isPm2 = false;
						this.amSigngo.mode = '3';
						this.pmSignleave.mode = '3';
					}
				} else {
					if (this.isDuringDate(amdk11, amdk21)) {
						this.isAm1 = true;
					}
					if (this.isDuringDate(amdk21, pmdk11)) {
						this.isAm1 = false;
						this.isAm2 = true;
						this.amSigngo.mode = '3';
					}
					if (this.isDuringDate(pmdk11, pmdk21)) {
						this.isAm1 = false;
						this.isAm2 = false;
						this.isPm1 = true;
						this.amSigngo.mode = '3';
						this.amSignleave.mode = '3';
					}
					if (this.isDuringDate(pmdk21, pmdk22)) {
						this.isAm1 = false;
						this.isAm2 = false;
						this.isPm1 = false;
						this.isPm2 = true;
						this.amSigngo.mode = '3';
						this.amSignleave.mode = '3';
						this.pmSigngo.mode = '3';
					}
					if (this.compareDate(pmdk22, nowTime) == '2') {
						this.isAm1 = false;
						this.isAm2 = false;
						this.isPm1 = false;
						this.isPm2 = false;
						this.amSigngo.mode = '3';
						this.amSignleave.mode = '3';
						this.pmSigngo.mode = '3';
						this.pmSignleave.mode = '3';
					}
				}

				if (res.data && res.data.records) {
					res.data.records.reverse().forEach(item => {
						switch (item.classShift) {
							case '1':
								this.isAm1 = false;
								this.isAm2 = true;
								this.isSign[0] = true;
								this.amSigngo.time = item.clockTime;
								this.amSigngo.mode = item.clockResult;
								this.amSigngo.address = item.clockPlace;
								break;
							case '2':
								this.isAm2 = false;
								this.isPm1 = true;
								this.isSign[1] = true;
								this.amSignleave.time = item.clockTime;
								this.amSignleave.mode = item.clockResult;
								this.amSignleave.address = item.clockPlace;
								break;
							case '3':
								this.isPm1 = false;
								this.isPm2 = true;
								this.isSign[2] = true;
								this.pmSigngo.time = item.clockTime;
								this.pmSigngo.mode = item.clockResult;
								this.pmSigngo.address = item.clockPlace;
								break;
							case '4':
								this.isPm2 = false;
								this.isSign[3] = true;
								this.pmSignleave.time = item.clockTime;
								this.pmSignleave.mode = item.clockResult;
								this.pmSignleave.address = item.clockPlace;
								break;
						}
					});

					if (this.isAm1) {
						this.num = '1';
					}
					if (this.isAm2) {
						this.isAm1 = false;
						this.num = '2';
					}
					if (this.isPm1) {
						this.isAm1 = this.isAm2 = false;
						this.num = '3';
					}
					if (this.isPm2) {
						this.isAm1 = this.isAm2 = this.isPm1 = false;
						this.num = '4';
					}
					if (this.isSign[3]) {
						this.isAm1 = this.isAm2 = this.isPm1 = this.isPm2 = false;
						this.num = '5';
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	border-top: 20rpx solid #f5f7fa;
	background-color: #fff;
}

.sign-title {
	border-top: 10px solid #f5f7fa;
	background-color: #fff;

	.title {
		line-height: 48rpx;

		.title-name {
			font-size: 18px;
			color: #333;
		}

		.title-dept {
			font-size: 14px;
			color: #666;
		}
	}

	.node {
		padding: 20rpx;
	}

	.portrait {
		margin-right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
}

.time-line {
	display: block;
	padding-left: 30rpx;

	.time-line-node {
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background: #999;
	}

	.time-line-item {
		padding: 30rpx 0;
	}
}

.wxdk {
	text-align: center;
	background: #fff;
	margin: 30rpx;
	padding: 30rpx 0;
	border-radius: 16rpx;

	.nowt {
		padding: 20rpx 0;
		font-size: 25px;
	}

	.nosign {
		color: #666;
	}
}

.editbtn {
	padding: 0 30rpx 0 0;
}

.relocation2 {
	text-align: right;
}

.popup {
	text-align: center;

	.ttl01 {
		padding: 32rpx 0 22rpx;
		font-size: 18px;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
	}

	.img01 {
		image {
			margin: 0 auto 8rpx;
			display: block;
			width: 354rpx;
			height: 184rpx;
		}
	}

	.txt01 {
		margin-bottom: 18rpx;
		font-size: 26px;
		font-weight: 600;
		color: #3396fb;
		line-height: 74rpx;
	}

	.txt02 {
		margin-bottom: 36rpx;
		font-size: 12px;
		color: #666666;
		line-height: 48rpx;
	}

	.btn01 {
		border-top: 1rpx solid #e6e6e6;
		font-size: 14px;
		font-weight: 500;
		color: #3396fb;
		line-height: 90rpx;
		cursor: pointer;
	}
}
</style>
